<template>
  <div>
    <V-CommonHeaderLeft>
      <div id="app">
        <el-row>
          <!-- 头部 -->
          <div class="header">
            <el-col :span="3" class="header-nav">
              <router-link to="/">首页&nbsp;&nbsp;/</router-link>
              <router-link to="/">营销&nbsp;&nbsp;/</router-link>
              <router-link to="/">促销详情</router-link>
            </el-col>
            <el-col :span="1" :offset="20" class="header-img">
              <!-- <img src="" alt=""> -->
            </el-col>
          </div>
        </el-row>
        <div class="contents">
          <el-row>
            <el-col :span="3">
              <input type="search" class="search" placeholder="请输入商品搜索">
            </el-col>
            <el-col :span="2" :offset="2" style="margin-left:125px;">
              <el-form ref="form" :model="form" class="contents-form">
                <el-form-item class="form-item">
                  <el-select v-model="value" placeholder="请选择类型" class="select-style">
                    <el-option label="区域一" value="shanghai"></el-option>
                  </el-select>
                </el-form-item>
              </el-form>
            </el-col>
            <el-col :span="2" :offset="1" style="margin-left:65px;">
              <el-form ref="form" :model="form" class="contents-form">
                <el-form-item class="form-item">
                  <el-select v-model="value" placeholder="优惠券类型" class="select-style">
                    <el-option label="区域一" value="shanghai"></el-option>
                  </el-select>
                </el-form-item>
              </el-form>
            </el-col>
            <!--选择日期-->
            <el-col :span="3" :offset="1">
              <el-form>
                <div class="contents-select-data">
                  <el-date-picker
                    style="width:300px;border-radius:0;height:37px;margin-left:15px"
                    v-model="value1"
                    type="daterange"
                    range-separator="~"
                    start-placeholder="开始日期"
                    end-placeholder="结束日期"
                  ></el-date-picker>
                </div>
              </el-form>
            </el-col>
            <!--/选择日期-->
            <el-col :span="2" :offset="7">
              <el-form>
                <router-link to="/marketingCouponAdd">
                  <div class="contents-add-plus">
                    <img src="./../../../../static/images/marting-plus.png" width="15" height="15">
                    <p style="padding-left:3px">新增</p>
                  </div>
                </router-link>
              </el-form>
            </el-col>
          </el-row>
        </div>
        <div style="background-color:#fff;height:450px;">
          <!--开始列表-->
          <el-row class="tableRow">
            <el-col :span="2">名称</el-col>
            <el-col :span="3">有效期</el-col>
            <el-col :span="3">类型</el-col>
            <el-col :span="3">面值</el-col>
            <el-col :span="3">使用门槛</el-col>
            <el-col :span="2">总数量</el-col>
            <el-col :span="2">已领取</el-col>
            <el-col :span="2">已使用</el-col>
            <el-col :span="2">发放范围</el-col>
            <el-col :span="2">状态</el-col>
          </el-row>
          <div class="scroll">
            <el-row
              class="tableData"
              v-for="(site,key) in tableData"
              :key="key"
              @mouseover.native="changeMask(key)"
              @mouseout.native="changeOut()"
            >
              <el-col :span="2">
                <router-link to="/marketingCouponDetails">{{site.name}}</router-link>
              </el-col>
              <el-col :span="3" class="tableData-td">{{site.youData}}</el-col>
              <el-col :span="3">{{site.type}}</el-col>
              <el-col :span="3">{{site.mianzhi}}</el-col>
              <el-col :span="3">{{site.apply}}</el-col>
              <el-col :span="2">{{site.count}}</el-col>
              <el-col :span="2">{{site.huo}}</el-col>
              <el-col :span="2">{{site.shi}}</el-col>
              <el-col :span="2">{{site.fanwei}}</el-col>
              <el-col :span="2">{{site.state}}</el-col>
              <el-col class="hoverKuang" v-if="key == i" :style="{opacity:opacity}">
                <router-link to="/marketingCouponEdit">编辑</router-link>
                <router-link to="/">启用</router-link>
              </el-col>
            </el-row>
          </div>
        </div>
      </div>
    </V-CommonHeaderLeft>
  </div>
</template>

<script>
import VCommonHeaderLeft from '@/components/common/vCommonHeaderLeft/VCommonHeaderLeft'
export default {
  components: {
    VCommonHeaderLeft
  },
  data () {
    return {
      hidden: 'hidden',
      opacity: 0,
      i: true,
      tableIndex: 0,
      form: {
        region: ''
      },
      value: '',
      pickerOptions: {
        shortcuts: [{
          text: '最近一周',
          onClick (picker) {
            const end = new Date()
            const start = new Date()
            start.setTime(start.getTime() - 3600 * 1000 * 24 * 7)
            picker.$emit('pick', [start, end])
          }
        }, {
          text: '最近一个月',
          onClick (picker) {
            const end = new Date()
            const start = new Date()
            start.setTime(start.getTime() - 3600 * 1000 * 24 * 30)
            picker.$emit('pick', [start, end])
          }
        }, {
          text: '最近三个月',
          onClick (picker) {
            const end = new Date()
            const start = new Date()
            start.setTime(start.getTime() - 3600 * 1000 * 24 * 90)
            picker.$emit('pick', [start, end])
          }
        }]
      },
      value1: '',
      value2: '',
      tableData: [
        {
          show: true,
          name: '小花',
          youData: '2018-06-12 00:00:00 2019-06-12 00:00:00',
          type: '满减券',
          mianzhi: 100,
          apply: '满500元可用',
          count: 10,
          huo: 0,
          shi: 0,
          fanwei: '全部客户',
          state: '未启用'
        }]
    }
  },
  methods: {
    changeMask (key) {
      this.opacity = 1
      this.i = key
    },
    changeOut () {
      this.opacity = 0
    }
  }
}
</script>

<style lang="scss" scoped>
#app {
  width: 90%;
  background-color: #f2f5f7;
  height: 100%;
  padding: 15px 10px 0px 10px;
  .header {
    height: 45px;
    .header-nav {
      line-height: 30px;
      font-size: 12px;
      display: flex;
      justify-content: space-around;
      padding-left: 10px;
      span {
        display: inline-block;
        margin-left: 10px;
      }
      a {
        color: #999999;
      }
      a:hover {
        color: #20ade5;
      }
    }
    .header-img {
      width: 25px;
      height: 25px;
      border-radius: 5px;
      border: 1px solid #dce4e7;
    }
  }
}
.search {
  border: 1px solid #dcdfe6;
  width: 240px;
  height: 38px;
  margin-top: 2px;
  text-indent: 1em;
}
.contents /deep/ .el-row {
  padding: 15px 0px 0px 25px;
  background-color: #fff;
  font-size: 12px;
  .select-style /deep/ .el-input__inner {
    height: 37px;
    border-radius: 0;
    width: 130px;
    font-size: 12px;
  }
}
.contents-select-data {
  margin-top: 3px;
}
.contents-add-plus {
  display: flex;
  font-size: 15px;
  color: #20ade5;
  margin-top: 10px;
}
.tableRow {
  border-top: 1px solid #e3e3e3;
  border-bottom: 1px solid #e3e3e3;
  height: 50px;
  background-color: #fcfcfc !important;
  line-height: 50px;
  font-size: 12px;
  color: #666;
  padding-left: 20px;
}
.tableData {
  border-top: 0;
  border-bottom: 1px solid #e3e3e3;
  height: 70px;
  background-color: #fff !important;
  padding-top: 0 !important;
  padding-bottom: 0 !important;
  line-height: 70px;
  font-size: 12px;
  padding-left: 20px;
}
.tableData:hover {
  background-color: #f5f5f5 !important;
}
.tableData-td {
  line-height: 30px;
}
.hoverKuang {
  width: 120px;
  height: 70px;
  background-color: #a3bbd4;
  font-size: 12px;
  display: flex;
  justify-content: space-around;
  align-items: center;
  position: absolute;
  right: 0px;
}
.hoverKuang a {
  color: #fcfdfd;
}
</style>
